import React, { useState, useEffect } from 'react'
import './home.css'
import { reqgetnews, reqgetgroupon, reqgetseckill, reqgetindexgoods } from '../../request/api'
import { Icon } from 'antd-mobile';
import { filterPrice } from '../../filters/index'
import img from '../../assets/img/pic1.png'
import img1 from '../../assets/img/pic2.png'
import img2 from '../../assets/img/pic3.png'
import img3 from '../../assets//img/pic6.png'
import img4 from '../../assets//img/pic7.png'
import img5 from '../../assets//img/pic8.png'
import img6 from '../../assets//img/pic9.png'
import img7 from '../../assets//img/pic10.png'
import img8 from '../../assets//img/pic11.png'
import img9 from '../../assets//img/biaoqian.png'
export default function Home(props) {
  const [list, getnew] = useState([]);

  const [groupon, getroupon] = useState([]);

  const [seck, getseck] = useState([]);

  const [goods, getgoods] = useState([]);

  const [n, getn] = useState(0);
  useEffect(() => {
    reqgetnews().then(res => {
      getnew(res.data.list)
    })
    reqgetgroupon().then(res => {
      getroupon(res.data.list)
    })
    reqgetseckill().then(res => {
      getseck(res.data.list)
    })
    reqgetindexgoods().then(res => {
      getgoods(res.data.list)
    })
  }, [])
  console.log(goods);
  return (
    <>
      <div className='home'>
        <div className="home-top">
          <div className='box'>
            <img src={img} alt="" />
            <input type="text" placeholder='搜索商品' />
            <i className='iconfont icon-sousuo'></i>
            <button>搜索</button>
            <img src={img1} alt="" />
          </div>
        </div>

        <div className='home-bg'>
          <div className='home-xr'>
            <p>新人专享</p>
            <div className="time">
              <span>05:</span>
              <span>42:</span>
              <span>47</span>
            </div>
            <div className='home-r'>
              <button>查看全部</button>
              <Icon type='right' size='sm' />
            </div>
          </div>
          <div className="home-vv">
            <div className="home-bb">
              <span>1重礼</span>
              <span>信任特价商品专区（限量供应，先到先得）</span>
            </div>
            <div className="home-one">
              {list.map(item => {
                return (
                  <div className="home-box" key={item.id} onClick={() => props.history.push('/detail?id=' + item.id)}>
                    <img src={item.img} alt="" />
                    <div className='goche'> <img src={img2} alt="" /></div>
                    <div className="home-title">
                      <span>{item.price}</span>
                      <span>{item.market_price}</span>
                    </div>
                  </div>
                )
              })}
            </div>
          </div>
          <div className="home-two">
            <div className="home-bb">
              <span>2重礼</span>
              <span>新人通用50元李隽（下单立减，省了又省）</span>
            </div>
            <div className="home-img">
              <img src={img3} alt="" />
              <img src={img4} alt="" />
            </div>
          </div>
        </div>
        <div className='home-centernav'>
          <i>
            <img src={img5} alt="" />
            <p>限时秒杀</p>
          </i>
          <i>
            <img src={img5} alt="" />
            <p>畅销商品</p>
          </i>
          <i>
            <img src={img5} alt="" />
            <p>品质大牌</p>
          </i>
          <i>
            <img src={img5} alt="" />
            <p>小U自营</p>
          </i>
          <i>
            <img src={img5} alt="" />
            <p>积分商城</p>
          </i>
        </div>
        <div className='home-chaoji'>
          <div className="home-tou">
            <span>超级秒杀</span>
            <div className="time">
              <b>05</b><b>:</b>
              <b>42</b><b>:</b>
              <b>47</b>
            </div>
          </div>

          <div className='wanren'>
            {/* <div className='con'>

              <img src={groupon.img} alt="" />
              <div className="Super_boxr">
                <p> <i>7.9折 </i> {groupon.goodsname}</p>
                <div className="Super_boxrt">
                  <span>￥{groupon.price}</span>
                  <span>{groupon.market_price}</span>
                </div>
              </div>
              </div> */}
            {
              groupon.map(item => (
                <div className='con' key={item.id} >
                  <img src={item.img} alt="" />
                  <div className="Super_boxr">
                    <p> <i>7.9折 </i> {item.goodsname}</p>
                    <div className="Super_boxrt">
                      <span>￥{item.price}</span>
                      <span>{item.market_price}</span>
                      <span>马上抢</span>
                    </div>
                  </div>
                </div>
              ))
            }
          </div>
        </div>

        <div className="home-seck">
          <div className="home-bb">
            <span>限时秒杀</span>
            <span>信任特价商品专区（限量供应，先到先得）</span>
          </div>
          <div className="home-one">
            {seck.map(item => {
              return (
                <div className="home-box" key={item.id} onClick={() => props.history.push('/detail?id=' + item.id)}>
                  <img src={item.img} alt="" />
                  <div className='goche'> <i className='iconfont icon-Shapecopy'></i></div>
                  <div className="home-title">
                    <span>{item.price}</span>
                    <span>{filterPrice(item.market_price)}</span>
                  </div>
                </div>
              )
            })}
          </div>
        </div>
        <div className="shaung11">
          <div className="shaung11l">
            <h4>双11尖货预约</h4>
            <img src={img6} alt="" />
          </div>
          <div className="shaung11r">
            <h4>畅购全球</h4>
            <img src={img7} alt="" />
            <img src={img8} alt="" />
          </div>
        </div>
        <div className='home-nav'>
          <ul>
            <li onClick={() => getn(0)} className={n === 0 ? 'select' : ''}>综合推荐</li>
            <li onClick={() => getn(1)} className={n === 1 ? 'select' : ''}>销量</li>
            <li onClick={() => getn(2)} className={n === 2 ? 'select' : ''}>价格</li>
            <li onClick={() => getn(3)} className={n === 3 ? 'select' : ''}>好评度</li>
          </ul>
        </div>
        <div className='navcon'>
          {/* <div className='conlist'>
            <img src="" alt="pic" />
            <div className='wenzi'>
              <p> <i>7.9折 </i> 女搜到女德班安慰和反而更</p>
              <div className='bottom'>
                <div className='fl'>
                  <span>&yen; 999</span>
                  <span>&yen; 999</span>
                </div>
                <div className='fr'>
                  <button>加入购物车</button>
                </div>
              </div>
            </div>
          </div> */}

          {
            goods.length > 0 ?
              goods[n].content.map(item => (
                <div className='conlist' key={item.id} onClick={() => props.history.push('/detail?id=' + item.id)}>
                  <img src={item.img} alt="pic" />
                  <div className='wenzi'>
                    <p> <i>7.9折 </i>{item.goodsname}</p>
                    <div className='img'>
                      <img src={img9} alt="" />
                      <p>直降198</p><p>限购1件</p>
                    </div>
                    <div className='bottom'>
                      <div className='fl'>
                        <span>&yen; {item.price}</span>
                        <span>&yen; {item.market_price}</span>
                      </div>
                      <div className='fr'>
                        <button>加入购物车</button>
                      </div>
                    </div>
                  </div>
                </div>)) : null
          }
        </div>
      </div>
    </>
  )
}
